<template>
  <div class="box">
    <el-select v-model="dataForm.r_name" placeholder="请选择房型">
      <el-option label="途选大床房" value="tuxuan"></el-option>
      <el-option label="途享大床房" value="tuxiang"></el-option>
      <el-option label="途奢双床房" value="tushe"></el-option>
      <el-option label="途客家庭房" value="tuke"></el-option>
    </el-select>
    <div class="date">{{ year }}年{{ mon }}月</div>
    <el-divider style="clear: both;"></el-divider>
    <table>
      <tr class="bg">
        <td>周日</td>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
        <td>周五</td>
        <td>周六</td>
      </tr>
      <tbody ref="tables">

      </tbody>
    </table>
  </div>
  <fangtaiDialog v-model="dialogVisible" :dialogVisible="dialogVisible" @dialogCancel="dialogCancelHandler"
    @dialogOk="dialogOKHandler" />
</template>

<script>
import fangtaiDialog from '../../components/fangtaiDialog.vue'
export default {
  components: {
    fangtaiDialog
  },
  mounted() {
    this.showDate(new Date());
  },
  data() {
    return {
      dataForm: {
        r_name: '',
      },
      year: 0,
      mon: 0,
      day: 0,
      dialogVisible: false,
      form1: {
        count: 11,
        price: 304,
        buy: 0
      }
    }
  },
  methods: {
    showDate(date) {
      this.day = date.getDate()
      date.setDate(1);
      var startWeek = date.getDay();
      var month = date.getMonth();
      this.year = date.getFullYear();
      this.mon = month + 1
      var maxDate = 28;
      for (var i = 29; i < 33; i++) {
        date.setDate(i);
        if (month !== date.getMonth()) {
          maxDate = i - 1;
          break;
        }
      }
      this.setTable(startWeek, maxDate);
    },
    setTable(startWeek, maxDate) {
      let now = new Date();
      let lastMonth = new Date(now.getTime());
      lastMonth.setMonth(lastMonth.getMonth());
      lastMonth.setDate(0);
      let prev = lastMonth.getDate()
      var str = "";
      for (var i = 0; i < Math.ceil((maxDate + startWeek) / 7); i++) {
        str += "<tr data-v-8979cdd1>"
        for (var j = 0; j < 7; j++) {
          var num = i * 7 + j - startWeek + 1;
          if (i === 0) {
            if (j >= startWeek) {
              str += `<td data-v-8979cdd1 data-d='${num}'>` + num + "</td>"
            } else {
              str += `<td data-v-8979cdd1>${prev - startWeek + j + 1}</td>`

            }
          } else {
            if (num <= maxDate) {
              str += `<td data-v-8979cdd1 data-d='${num}'>` + num + "</td>"
            } else {
              str += `<td data-v-8979cdd1 data-d='${num}'>${num - maxDate}</td>`
            }
          }
        }
        str += "</tr>"
      }
      this.$refs.tables.innerHTML = str;
      Array.from(this.$refs.tables.querySelectorAll('td')).forEach(item => {
        let div1 = document.createElement('div')
        div1.innerHTML = `<p style="font-size:10px;margin-top:8px;margin-bottom:-10px;text-align:right;margin-right:5px;">￥${this.form1.price}</p><p style="font-size:10px;margin-bottom:5px;text-align:right;margin-right:5px;">余${this.form1.count}间/售${this.form1.buy}间</p>`
        if (item.getAttribute('data-d') == this.day) {
          item.innerText += '(今天)';
          item.addEventListener('click', this.clickHandler);
          item.style.background = '#8EAFFA';
          item.style.width = '155px'
          item.appendChild(div1)
        }
        let div = document.createElement('div')
        div.innerHTML = `<p style="font-size:10px;margin-top:8px;margin-bottom:-10px;margin-right:5px;text-align:right;">￥304</p><p style="font-size:10px;margin-bottom:5px;margin-right:5px;text-align:right;">余11间/售0间</p>`
        if (item.getAttribute('data-d') > this.day) {
          item.appendChild(div)
        }
        let d=document.createElement('div')
        d.innerHTML='<p></p>'
        if (item.getAttribute('data-d') < this.day) {
          item.appendChild(d)
        }
      })
    },
    clickHandler() {
      this.dialogVisible = true
    },
    dialogCancelHandler() {
      this.dialogVisible = false;
    },
    dialogOKHandler({ form }) {
      this.form1 = {
        ...form,
        count: form.count == '维持不变' ? 11 : form.count
      }
      this.dialogVisible = false;
    }
  },
  watch: {
    day() {
      this.showDate(new Date());
    },
    form1() {
      this.showDate(new Date());
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  background: white;
  padding-bottom: 20px;

  .el-select {
    width: 130px;
    float: left;
    margin: 8px 5px 8px 50px;
  }

  .date {
    width: 130px;
    height: 30px;
    border: 1px solid rgb(220, 223, 230);
    border-radius: 4px;
    margin: 8px 0;
    margin-left: 20px;
    float: left;
    line-height: 30px;
    text-align: center;
    color: rgb(198, 191, 198);
  }

  table {
    width: 98%;
    margin: 10px auto;
    border-radius: 5px;
    border-collapse: collapse;
    overflow: hidden;

    td {
      border: 1px solid rgb(204, 204, 204);
      height: 60px;
    }

    .bg {
      background-color: #C9DAFF;

      td {
        text-align: center;
      }
    }
  }
}
</style>